<template>
  <div id="user_top">
    <el-row class="user_top_row">
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="16">
        <div class="center_top">
          <span class="pendant"></span>
          <div class="center_before"></div>
          <div class="profile_info">
            <el-avatar style="width:60px;height:60px;vertical-align: bottom" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <div class="profile-info-cont">
              <span>星天大人</span> <i class="el-icon-male" style="background-color:#409EFF;color:white"></i>
              <div class="introduce"> <span>我是世界上最靓的仔</span>
                <el-divider direction="vertical"></el-divider>
                <span>22岁</span>
                <el-divider direction="vertical"></el-divider>
                <span>北京</span>
                <el-divider direction="vertical"></el-divider>
                <span>光大科技java开发</span>
              </div>
            </div>
          </div>
          <div class="operation">
            <el-button type="primary" icon="el-icon-edit" size="small">私信</el-button>
          </div>
        </div>
        <el-container>
          <el-aside width="200px" style="background-color: white">
            <el-menu
                :default-active="activeIndex"
                class="el-menu-vertical-demo"
                @select="handleSelect"
            >
              <el-menu-item index="baseInfo">
                <span class="el-icon-tickets"></span>
                <span slot="title">基本信息</span>
              </el-menu-item >
              <el-menu-item index="articleManage">
                <i class="el-icon-notebook-1"></i>
                <span slot="title">文章管理</span>
              </el-menu-item>
            </el-menu></el-aside>
          <el-main>
            <div id="personal_as" style="transition: all .2s">
              <div id="baseInfo" v-show="this.activeIndex=='baseInfo'">
                  <el-descriptions class="margin-top" title="基本信息" :column="2"  border>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-user"></i>
                        昵称
                      </template>
                      星天大人
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="iconfont icon-gender"></i>
                        性别
                      </template>
                      男
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="iconfont icon-nianling"></i>
                        年龄
                      </template>
                      25
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="iconfont icon-shenfenzheng"></i>
                        身份
                      </template>
                      光大科技java开发
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="iconfont icon-biyeyuanxiao"></i>
                        毕业院校
                      </template>
                      辽宁工程技术大学
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="iconfont icon-xueli"></i>
                        学历
                      </template>
                      本科
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="iconfont icon-juzhudi"></i>
                        居住地
                      </template>
                      厦门
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="iconfont icon-wodejianli"></i>
                        状态
                      </template>
                      找工作
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="iconfont icon-gexingqianming"></i>
                        个性签名
                      </template>
                      我是这个世界上最靓的仔
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              <div v-show="this.activeIndex=='articleManage'"  id="articleManage">
                <div class="article_item">
                  <div class="content">
                    <div class="publish_title">
                      <span>2023届前端暑期实习求职总结</span>
                      <span class="publish_category">
              </span>
                    </div>
                    <div class="publish_content">暑期实习的求职总算到了尾声了，自己在决赛圈终于收获了网易云的offer，
                      自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，
                      自己在决赛圈终于收获了网易云的offer，焦虑清零！ 双非硕，3.3写完小论文开始准备面试相关的内容，这时和师兄的交流才知道，
                      最好三月中旬之前能投简历，因为有些大厂流程比较慢
                    </div>
                    <div class="publish_detail" style="position: relative">
                      <span><i class="iconfont icon-good">19</i></span>
                      <span style="padding-left:15px;"><i class="iconfont icon-comment">10</i></span>
                      <span style="position:absolute;right:50%;top:0;">问题讨论</span>
                      <span style="float:right;display: inline-block;">发布于 2022-05-16 12:35</span>
                    </div>
                  </div>
                </div>
                <div class="article_item">
                  <div class="content">
                    <div class="publish_title">
                      <span>2023届前端暑期实习求职总结</span>
                      <span class="publish_category">
              </span>
                    </div>
                    <div class="publish_content">暑期实习的求职总算到了尾声了，自己在决赛圈终于收获了网易云的offer，
                      自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，自己在决赛圈终于收获了网易云的offer，
                      自己在决赛圈终于收获了网易云的offer，焦虑清零！ 双非硕，3.3写完小论文开始准备面试相关的内容，这时和师兄的交流才知道，
                      最好三月中旬之前能投简历，因为有些大厂流程比较慢
                    </div>
                    <div class="publish_detail" style="position: relative">
                      <span><i class="iconfont icon-good">19</i></span>
                      <span style="padding-left:15px;"><i class="iconfont icon-comment">10</i></span>
                      <span style="position:absolute;right:50%;top:0;">问题讨论</span>
                      <span style="float:right;display: inline-block;">发布于 2022-05-16 12:35</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "UserPage",
  data(){
    return{
      activeIndex:'baseInfo',
      options:[
        {value:'唐朝阳-java开发'},
        {value:'唐朝阳-前端开发'}
      ],
      value:'唐朝阳-java开发'
    }
  },
  methods:{
    handleSelect(key){
      console.log(key)
      if(key!=null){
        this.activeIndex=key;
      }
    }
  }
}
</script>

<style scoped>
#articleManage{
  min-height:443px;
}
#baseInfo{
  padding:20px;
  background-color: white;
  height:410px;
  min-height:410px;
}
.ub_left{
  display: inline-block;
  width:60%;
  height:500px;
  background-color:white;
  margin-right: 20px;
  padding:20px;
}
.ub_right{
  display: inline-block;
  width:30%;
  height:500px;
  padding:20px;
  background-color:white;
}
.grid-content {
  min-height: 50px;
  font-size: 14px;
}
.user_top_row{
  margin-top:20px;
}
.center_top {
  height: 100px;
  background-color: white;
  position: relative;
  margin-bottom:20px;
  box-shadow: 0 5px 5px 0 #eceaea;

}

.center_before {
  height: 100px;
  width: 10px;
  background-color: #10b4d2;
  display: inline-block;
  float:left;
}

.pendant {
  background: url(../../assets/img/pendant.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  height: 62px;
  left: -13px;
  position: absolute;
  top: -6px;
  width: 68px
}
.profile_info{
  width:550px;
  padding: 20px 20px 0 75px;
  float:left;
}
.profile-info-cont{
  margin-left: 20px;
  display: inline-block;
  color:#10b4d2;
}
.introduce{
  padding-top:8px;
  margin-top:5px;
  color:#8b8e99;
  font-size:14px;
}
.operation{
  height:100px;
  float:right;
  line-height:100px;
  margin-right: 50px;
}
.el-aside{
  overflow: hidden;
}
#personal_as{

  width:100%;
}
.el-main{
  background-color: white;
}
.slide-fade-enter-active {
  transition: all .2s ease;
  transition-delay: .2s;
}
.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
#article_manage{
  background-color:white;
  box-shadow: 0 5px 5px 0 #eceaea;
  min-height: 433px;
}
/deep/ .el-tabs__content {
  min-height: 378px;
  box-shadow: 0 5px 5px 0 #eceaea;
}
.hot_article {
  width: 97.5%;
  height: 420px;
  background-color: white;
  margin-left: 10px;
}

.el-divider--horizontal {
  height: 0.5px;
  margin: 5px 0 5px 0;
}

.filter {
  padding: 10px 20px 0 20px;
}

.choice {
  padding: 10px 20px 0 20px;
}

.publish_name {
  color: cornflowerblue;
}

.publish_user {
  display: inline-block;
  height: 30px;
}

.publish_name {
  top: 3px;
  padding-left: 5px;
}

.publish_category {
  font-size: 14px;
  top: 8px;
  color: #8a8a8a;
  float: right;
  font-weight:500;
}

.publish_title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 7px;
}

.publish_content {
  margin-top: 5px;
  color: #8a8a8a;
  font-size: 14px;
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 3;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}
.comment_content{
  margin-top: 10px;
  color: #8a8a8a;
  font-size: 14px;
}
.publish_detail {
  color: #8a8a8a;
  margin-top: 5px;
  font-size: 14px;
}

.article_item {
  margin-bottom: 20px;
  cursor: pointer;
  box-shadow: 2px 3px 0 2px rgb(0 0 0 / 10%);
  position: relative;
}

</style>